<ngm-table class="flex-1 overflow-hidden rounded-lg mt-2"
    paging
    [data]="approvals$ | async"
    [columns]="[
        {
            name: 'permissionType',
            caption: 'PAC.KEY_WORDS.PermissionType' | translate: {Default: 'Permission Type'},
            cellTemplate: typeTempl
        },
        {
            name: 'indicatorGroup',
            caption: 'PAC.KEY_WORDS.IndicatorGroup' | translate: {Default: 'Indicator Group'},
            cellTemplate: igTempl
        },
        {
            name: 'indicator',
            caption: 'PAC.KEY_WORDS.Indicator' | translate: {Default: 'Indicator'},
            cellTemplate: indicatorTempl
        },
        {
            name: 'createdBy',
            caption: 'PAC.KEY_WORDS.CreatedBy' | translate: {Default: 'Created By'},
            pipe: userLabel
        },
        {
            name: 'createdAt',
            caption: 'PAC.KEY_WORDS.CreatedAt' | translate: {Default: 'Created At'},
            pipe: getDateAtPipe()
        },
        {
            name: 'userApprovals',
            caption: 'PAC.KEY_WORDS.Users' | translate: {Default: 'Users'},
            cellTemplate: usersTempl
        },
        {
            name: 'action',
            caption: 'PAC.KEY_WORDS.Authorization' | translate: {Default: 'Authorization'},
            cellTemplate: actionTempl
        }
    ]">
</ngm-table>

<div *ngIf="loading" class="absolute top-1/2 left-1/2 -mt-4 -ml-4 z-10">
    <mat-spinner diameter="30" strokeWidth="2">
    </mat-spinner>
</div>

<ng-template #typeTempl let-permissionType="permissionType">
    <span>
        {{ 'PAC.ApprovalPolicy.' + permissionType | translate: { Default: permissionType } }}
    </span>
</ng-template>

<ng-template #igTempl let-indicatorGroup="indicatorGroup">
    <a *ngIf="indicatorGroup" [routerLink]="['/settings/business-area/', indicatorGroup?.id]">{{ indicatorGroup?.name }}</a>
</ng-template>

<ng-template #indicatorTempl let-indicator="indicator">
    <a [routerLink]="['/indicator/viewer', indicator?.id]">{{ indicator?.name }}</a>
</ng-template>

<ng-template #usersTempl let-userApprovals="userApprovals">
    <mat-chip-set class="pac-user-chip-set" displayDensity="compact" [style.width.px]="userApprovals.length*20 + 120">
        <mat-chip *ngFor="let userApproval of userApprovals; let i = index" [style.width.px]="120" [style.left.px]="i*20">
            <pac-user-avatar matChipAvatar [user]="userApproval.user" class="m-0 shrink-0"></pac-user-avatar>
            <span class="text-ellipsis overflow-hidden whitespace-nowrap">
                {{ userApproval.user | user }}
            </span>
        </mat-chip>
    </mat-chip-set>
</ng-template>

<ng-template #actionTempl let-indicator="indicator" let-approvalId="id" let-status="status" let-loading="loading">
    <div *ngIf="status===PermissionApprovalStatus.REQUESTED" ngmButtonGroup displayDensity="compact" class="inline-block">
        <button mat-raised-button displayDensity="compact" color="primary" [disabled]="loading"
            (click)="approval(approvalId)">
            <div class="flex items-center">
                <mat-icon>task_alt</mat-icon>
                {{ 'PAC.KEY_WORDS.Approve' | translate: {Default: 'Approve'} }}
            </div>
        </button>
        <button mat-raised-button displayDensity="compact" color="warn" [disabled]="loading"
            (click)="refuse(approvalId)">
            <div class="flex items-center">
                <mat-icon>block</mat-icon>
                {{ 'PAC.KEY_WORDS.Refuse' | translate: {Default: 'Refuse'} }}
            </div>
        </button>
    </div>

    <mat-icon *ngIf="status===PermissionApprovalStatus.APPROVED" displayDensity="cosy" color="primary">task_alt</mat-icon>
    <mat-icon *ngIf="status===PermissionApprovalStatus.REFUSED" displayDensity="cosy" color="warn">block</mat-icon>
</ng-template>
